import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import "videojs-flash";
import cloneDeep from "clone-deep"
import videojs from "video.js";
import SWF_URL from "../../../../node_modules/videojs-swf/dist/video-js.swf"
videojs.options.flash.swf = SWF_URL // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

export default {
    name: "Previewmode",
    components: {
        videoPlayer
    },
    //props: ["videoUrl"],//获取父组件的参数
    data() {
        return {
            reply:{},
            img_ac:true,
            dataMsg:{},
            reply:{},
            isShow:false,
            classObject: false,
            flagSrc: '',//这个用来标记被点击视频的URL
            flagActive: 0,//这个用来标记被点击视频的索引（数组下标）
            playerOptions: [],//这个是存放视频的数组，如果你要切换视频，直接判断要新增的视频（flagSrc）是否在数组内，如果不在，在数组里将他代替
            initialized: false,//初始化
            currentTech: '',
            radio: '2',
            streams: {
                rtmp: '',
            },
            optionsData:[],
            // 视频播放
            playerOptionsflag: {
                playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
                height: "500",
                width: "700",
                autoplay: true, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                poster: require("../../../../static/images/picture1.png"), //没有播放时图片
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                html5: { hls: { withCredentials: false } },
                sources: [{
                    type: "rtmp/flv",
                    src: ''//url地址
                }],
                techOrder: ["flash"],
                controlBar: {
                    timeDivider: false,
                    durationDisplay: false,
                    remainingTimeDisplay: false,
                    currentTimeDisplay: false, // 当前时间
                    volumeControl: true, // 声音控制键
                    playToggle: false, // 暂停和播放键
                    progressControl: true, // 进度条
                    fullscreenToggle: true // 全屏按钮
                },
            },
            //定义参数回调函数
            filters: {

            }
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            // this.$http.get('./static/playerOptions.json')
            //     .then((res) => {
            //        this.optionsData = res.rows;
            //        for(var i = 0 ;i < res.rows.length;i++){
            //            this.playerOptions[0] = this.playerOptionsCloneFactory(res.rows[i].url);
            //        }
            //     }).catch((err) => {
            //       console.log(err);
            // });
            // this.playerOptions[1] = this.playerOptionsCloneFactory(
            //     "rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp"
            // );
            // this.playerOptions[2] = this.playerOptionsCloneFactory(
            //     "rtmp://live.hkstv.hk.lxdns.com/live/hks1"
            // );
            // this.playerOptions[3] = this.playerOptionsCloneFactory(
            //     "rtmp://live4.tdm.com.mo:80/ch1/_definst_/ch1.live"
            // );
            // this.playerOptions[4] = this.playerOptionsCloneFactory(
            //     "rtmp://live.chosun.gscdn.com/live/tvchosun1.stream"
            // );
            // this.playerOptions[5] = this.playerOptionsCloneFactory(
            //     "rtmp://media3.sinovision.net:1935/live/livestream"
            // );
            // this.playerOptions[6] = this.playerOptionsCloneFactory(
            //     "rtmp://58.200.131.2:1935/livetv/hunantv"
            // );
            // this.playerOptions[7] = this.playerOptionsCloneFactory(
            //     "rtmp://202.69.69.180:443/webcast/bshdlive-pc"
            // );
            // this.playerOptions[8] = this.playerOptionsCloneFactory(
            //     "rtmp://live4.tdm.com.mo:80/ch1/_definst_/ch1.live"
            // );
            // this.playerOptions[9] = this.playerOptionsCloneFactory(
            //     "rtmp://live4.tdm.com.mo:80/ch1/_definst_/ch1.live"
            // );
        },
        playerOptionsCloneFactory(url) {
            let playerOptionsClone = cloneDeep(this.playerOptionsflag);
            playerOptionsClone.sources[0].src = url
            return playerOptionsClone
        },
        divVideo(index) {
            this.playerOptions[index - 1] = this.playerOptionsCloneFactory('rtmp://192.168.1.138/live/test')
        },
        onPlayerReadied(player) {

        }
    }
}